<template>
	<view class="page">
		<cu-custom bgColor="bg-gradual-red" :isBack="true">
			<block slot="backText">返回</block>

			<block slot="content">{{title}}</block>
		</cu-custom>

		<scroll-view scroll-x class="bg-white nav">
			<view class="flex text-center">
				<view class="cu-item flex-sub" :class="item.type==TabCur?'text-orange cur':''"
					v-for="(item,index) in tapType" :key="index" @tap="tabSelect" :data-id="item.type"
					:data-type='item.type'>
					{{item.name}}
				</view>
			</view>
		</scroll-view>
		<scroll-view scroll-y="true" class="orderBox">
			<Loading class="loading1" v-show="isLoading" :isStatus='loadStatus'></Loading>
			<view class="cu-card article order-box animation-slide-bottom" v-for="(dat,ind) in orderData"
				:class="{'animation-remove':ind==changeIndex}" :style="[{animationDelay: (ind + 1)*0.1 + 's'}]"
				:id="'order'+ind" :animation="dat.animationData">
				<view class="cu-item shadow">
					<view class="box-row">
						<view class="box-row-title">
							订单号:{{dat.order_no}}
						</view>
						<view class="box-row-right">
							<text class="cuIcon-delete" @click="deleteOrder(ind,dat.status)"
								v-if="dat.status==1 || dat.status==4"></text>
						</view>
					</view>
					<view class="content" @click="jump(ind)">
						<image class="contentImg" :src="dat.cover" style="height: 120rpx;" mode="heightFix"></image>
						<view class="contentBox">
							<view class="text-cut oderT" style="font-size: 35upx;">{{dat.title}}</view>

							<view class="text-content">创建时间 ：{{dat.create_time}}</view>
						</view>

					</view>
					<view class="box-row">
						<view class="box-row-title">
							类型
						</view>
						<view class="box-row-right">
							{{dat.typeArr.title}} / {{dat.typeArr.price}} 元
						</view>
					</view>
					<view class="box-row">
						<view class="box-row-title">
							金额
						</view>
						<view class="box-row-right color">
							￥{{dat.fen}}
						</view>
					</view>
					<view class="box-row line-hr">
						<view class="box-row-title">
							报名信息
						</view>
						<view class="box-row-right">

						</view>

					</view>
					<view class="box-row">
						<view class="box-row-title">
							{{dat.order[0].name}}:{{dat.order[0].nam}}
						</view>
						<view class="box-row-right" @click="changeShow(ind)">
							{{dat.showTitle.title}} <text class="text-grey cuIcon-right"
								v-if='!dat.showTitle.status'></text>
							<text class="text-grey cuIcon-unfold" v-if='dat.showTitle.status'></text>
						</view>
					</view>
					<view class="box-row animation-slide-bottom" v-for="(item,index) in dat.order"
						v-if="dat.showTitle.status && index!=0" :style="[{animationDelay: (index + 1)*0.1 + 's'}]">
						<view class="box-row-title">
							{{item.name}}:{{item.nam}}
						</view>
					</view>

					<view class="box-row">
						<view class="box-row-title">

						</view>
						<view class="box-row-right" v-if="dat.status==1">
							<button class="cu-btn round lg  bg-red zhifu" @click="pay(dat.order_no,ind)">立即支付</button>
						</view>
					</view>

				</view>
			</view>

			<view class="error" v-if="orderData==''">
				<image src="http://192.168.3.227/images/shouji/error1.png" mode="aspectFit" class="gif-white response"
					style="height:240upx"></image>
			</view>


		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: "我的订单",
				TabCur: 0,
				currentType: '',
				isLoading: false,
				loadStatus: 'load',
				orderData: [],
				changeIndex: -1,
				tapType: [{
						name: "待付款",
						type: 1
					},
					{
						name: "已完成",
						type: 2
					},
					{
						name: "已取消",
						type: 4
					}
				]


			}
		},
		onUnload() {
			let pages = getCurrentPages();
			let beforePage = pages[pages.length - 2];
			beforePage.$vm.upData("");


		},
		onShareAppMessage(res) {
			console.log("分享的openid " + this.initCode);
			return {
				title: "乐知课程艺术中心",
				path: '/pages/index/index?userCode=' + this.initCode
			}

		},
		onLoad(option) {
			console.log("初次加载" + option.type + "courseId " + option.courseId);
			this.TabCur = option.type;
			this.loadOrder(option.type);

		},
		methods: {
			/**
			 * 处理显示类型
			 */
			doType(dat, id) {
				console.log("this.course_type_id: " + id);
				for (let i in dat) {
					if (dat[i].subTypeId == id) {
						return dat[i];
					}
				}
			},

			/**加载数据
			 * @param {Object} type 订单类型
			 */
			loadOrder(type) { //加载订单数据
				this.loadStatus = 'load';
				let dat = {
					action: 'getOrderByUserId',
					openId: this.$openid,
					status: type
				};
				this.Reques.commonQuest('xcx/order.api.php', 'POST', dat).then((res) => {
					console.log(res);
					if (res.data.code == 0 && res.statusCode == 200) {
						let dat = res.data.data.orderList;
						this.loadStatus = (dat.length == 0) ? 'error1' : 'true';
						this.isLoading = (this.loadStatus == 'true') ? false : true;
						this.orderData = [];
						for (let i in dat) {
							if (dat[i].status == type) {
								let order = [{
										name: "姓名",
										nam: dat[i].name
									},
									{
										name: '性别',
										nam: (dat[i].gender == 1) ? '男' : '女'
									},
									{
										name: "年级",
										nam: dat[i].grade
									},
									{
										name: "专业",
										nam: dat[i].major
									},
									{
										name: '手机',
										nam: dat[i].phone
									}
								];
								dat[i].fen = (dat[i].fen / 100).toFixed(2);
								dat[i].showTitle = {
									status: false,
									title: "展开"
								};
								dat[i].typeArr = this.doType(dat[i].subType, dat[i].course_type_id);
								dat[i].order = order;
								this.orderData.push(dat[i]);
							}
						}
						console.log(this.orderData);
					} else {
						this.loadStatus = 'error2';
					}
				}, (err) => {
					this.loadStatus = 'error2';
				})
			},
			/**跳转
			 * @param {Object} index 指定哪一条数据
			 */
			jump(index) {
				let courseId = this.orderData[index].entity_id;
				let dat = {
					1: {
						path: "/pages/goodDetail/home?courseId=" + courseId
					},
					2: {
						path: "/pages/mycourse/mycourse?courseId=" + courseId
					}
				}
				console.log("courseId " + dat[this.orderData[index].status].path);
				uni.navigateTo({
					url: dat[this.orderData[index].status].path,
					animationType: 'slide-in-left'
				})
			},
			/**订单切换
			 * @param {Object} e
			 */
			tabSelect(e) {
				console.log(e);
				this.TabCur = e.currentTarget.dataset.id;
				this.currentType = e.currentTarget.dataset.type;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
				this.loadOrder(this.currentType);
			},
			/**展开 详细的报名信息
			 * @param {Object} ind 指定的下标
			 */
			changeShow(ind) {
				if (this.orderData[ind].showTitle.status) {
					this.orderData[ind].showTitle.status = false;
					this.orderData[ind].showTitle.title = '展开';
				} else {
					this.orderData[ind].showTitle.status = true;
					this.orderData[ind].showTitle.title = '收起';
				}

			},
			/**发起支付
			 * @param {Object} orderNo 订单号
			 */
			pay(orderNo, index) {

				uni.showLoading({
					title: "请求中..."
				});
				let data = {
					action: 'prePay',
					orderNo: orderNo,
					openId: this.$openid
				};

				let tishi = (title, content) => {
					uni.hideLoading();
					uni.showModal({
						title: title,
						content: content
					})
				}

				let pay = () => {
					this.Reques.commonQuest('xcx/course.api.php', 'POST', data).then((res) => {
						if (res.data.code == 0) {
							let dat = res.data;
							uni.requestPayment({
								provider: 'wxpay',
								timeStamp: '' + dat.timeStamp,
								nonceStr: dat.nonceStr,
								package: dat.package,
								signType: dat.signType,
								paySign: dat.paySign,
								success: (res) => {
									uni.hideLoading();
									uni.showToast({
										title: "报名成功"
									});
									this.changeIndex = -1;
									this.orderData.splice(index, 1);
									console.log('pay-success' + JSON.stringify(res));
								},
								fail: (err) => {
									uni.hideLoading();
									console.log('pay-fail: ' + JSON.stringify(err));
								}
							});


						} else {
							this.CON.CON.showMsg("支付失败，稍后再试");
						}

					}, (err) => {
						this.CON.CON.showMsg("支付失败，稍后再试");

					})
				}
				let unpay = () => {
					let dat = {
						"action": "finishOrder",
						"orderNo": orderNo,
						openId: this.$openid
					}
					uni.showLoading({
						title: "请求中..."
					});
					this.Reques.commonQuest('xcx/course.api.php', 'POST', dat).then((res) => {
						uni.hideLoading();
						if (res.statusCode == 200 && res.data.code == 0) {
							uni.showToast({
								title: "报名成功"
							});
							this.changeIndex = -1;
							this.orderData.splice(index, 1);
						} else {
							tishi('温馨提示', '报名失败！请稍后再试');
						}

					}, err => {
						tishi('温馨提示', '报名失败！请稍后再试');
					})

				}

				(this.orderData[index].fen > 0) ? (pay()) : unpay();
			},

			/**
			 * 删除订单
			 * @param {Object} index
			 */
			deleteOrder(index, status) {

				let dat = {
					action: "cancelOrder",
					openId: this.Reques.sessionData.data.openId,
					orderNo: this.orderData[index].order_no
				};
				(status == 4) ? (dat.action = "deleteOrder") : "";
				uni.showLoading({
					title: "请求中..."
				});
				let error = () => {
					uni.hideLoading();
					uni.showToast({
						title: '请稍后再试'
					})
				}
				this.Reques.commonQuest('xcx/order.api.php', 'POST', dat).then((res) => {
					console.log(res);
					if (res.data.code == 0 && res.statusCode == 200) {
						this.changeIndex = index;
						setTimeout(() => {
							uni.hideLoading();
							uni.showToast({
								title: '删除成功'
							});
							this.changeIndex = -1;
							this.orderData.splice(index, 1);
						}, 1000);
					} else {
						error();
					}
				}, (err) => {
					error();
				});
			}


		}
	}
</script>

<style scoped>
	.orderBox {
		width: 100vw;
		height: 90vh;

	}

	.order-box {
		width: 100%;
	}

	.box-row {
		margin-top: 7rpx;
		width: 100%;
		display: flex;
		align-items: center;
		font-size: 35upx;
		height: 60rpx;
		position: relative;
		color: #A6A6A6;
	}

	.box-row-title {
		padding-left: 30upx;
	}

	.box-row-right {
		position: absolute;
		float: right;
		right: 15upx;
	}

	.zhifu {
		height: 60rpx;
	}

	.del-box {
		position: relative;
		float: right;
		right: 1vw;
	}

	.error {
		height: 80%;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;

	}

	.color {
		color: red;
	}

	.loading {
		height: 100%;
	}

	.oderT {
		max-height: 15vh;
		width: 60vw;
	}

	.animation-remove {

		animation: shake1 2s 1 ease-out;

	}

	@keyframes shake1 {
		0% {
			transform: translateX(0)
		}

		100% {
			transform: translateX(1000px);
			opacity: 0;
			display: none;
		}
	}
</style>
